<!DOCTYPE html>
<html lang="en">

<head>

     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=Edge">
     <meta name="description" content="">
     <meta name="keywords" content="">
     <meta name="author" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
     <meta name="renderer" content="webkit">
     <meta http-equiv="Cache-Control" content="no-siteapp" />
     <link rel="icon" type="image/png" href="assets/i/favicon.png">
     <meta name="mobile-web-app-capable" content="yes">
     <link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
     <meta name="apple-mobile-web-app-title" content="Amaze UI" />
     <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
     <meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png">
     <meta name="msapplication-TileColor" content="#0e90d2">
     <link rel="stylesheet" href="editor.md/css/editormd.css" />


     <title>We Blog--Write</title>

     <link rel="stylesheet" href="css/bootstrap.min.css">
     <link rel="stylesheet" href="css/font-awesome.min.css">

     <!-- Main css -->
     <link rel="stylesheet" href="css/style.css">
     <link href="https://fonts.googleapis.com/css?family=Lora|Merriweather:300,400" rel="stylesheet">

</head>

<style>
     [v-cloak] {
          display: none;
     }
</style>

<body>

     <!-- PRE LOADER -->

     <div class="preloader">
          <div class="sk-spinner sk-spinner-wordpress">
               <span class="sk-inner-circle"></span>
          </div>
     </div>

     <!-- Navigation section  -->

     <div class="navbar navbar-default navbar-static-top" role="navigation">
          <div class="container">

               <div class="navbar-header">
                    <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                         <span class="icon icon-bar"></span>
                         <span class="icon icon-bar"></span>
                         <span class="icon icon-bar"></span>
                    </button>
                    <a href="index.html" class="navbar-brand">Home</a>
                    <!--
                    <a href="admin.html" style="float: left" class="navbar-brand">Admin</a>
                    -->
                    <a href="write.html" style="float: left" class="navbar-brand">Write</a>
               </div>

          </div>
     </div>


     <!-- Blog Section -->
     
     <section id="blog">
          <div class="container">
               <div class="row">
                    <!-- 编辑某个具体的博客 -->
                    <div class="col-md-offset-1 col-md-10 col-sm-12">
                        <div class="am-form">
                            <div class="am-form-group">
                                <h3><label for="doc-ipt-email-1">博客标题</label></h3>
                            </br>
                                <input type="text" class="" id="blog_title">
                            </div>
                        </div>
                    
                        <article id="blog_write">
                            <textarea style="display:none;"></textarea>
                        </article>
                        <!-- 标签 -->
                        <div class="am-form">
                            <div class="am-form-group">
                                <h5><label for="doc-ipt-email-1">标签：</label></h5>
                                <input type="text" class="" id="tag_name">
                            </div>
                        </div>
                        <a href="index.html">
                             <img src="images/返回.png" width="40" height="40">
                         </a>
                             <img style="float: right" src="images/对勾.png" width="40" height="40" v-on:click="write_blog()">
                    </div>
               </div>
          </div>
     </section>

     <!-- Footer Section -->
     <!-- 跳到顶部按钮 -->
     <footer>
          <div class="container">
               <div class="row">

                    <div class="col-md-12 col-sm-12">
                         <h3>Talk to me</h3>
                         <ul class="social-icon">
                              <li><a href="https://github.com/gdis5251"><img src="images/github.png" width="50" height="50"></a></li>
                         </ul>
                    </div>

               </div>
          </div>
     </footer>


     <!-- Back top -->
     <a href="#back-top" class="go-top"><i class="fa fa-angle-up"></i></a>

     <script src="js/jquery.js"></script>
     <script src="js/bootstrap.min.js"></script>
     <script src="js/particles.min.js"></script>
     <script src="js/app.js"></script>
     <script src="js/jquery.parallax.js"></script>
     <script src="js/smoothscroll.js"></script>
     <script src="js/custom.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

     <!-- 引入 markdown 编辑器 -->
     <script src="editor.md/lib/marked.min.js"></script>
     <script src="editor.md/lib/prettify.min.js"></script>
     <script src="editor.md/lib/raphael.min.js"></script>
     <script src="editor.md/lib/underscore.min.js"></script>
     <script src="editor.md/lib/sequence-diagram.min.js"></script>
     <script src="editor.md/lib/flowchart.min.js"></script>
     <script src="editor.md/lib/jquery.flowchart.min.js"></script>
     <script src="editor.md/editormd.js"></script>

     <!-- SCRIPTS -->
     <script>
          // 构造 Vue 数据
          var app = new Vue({
               el: '#blog',
               data: {
                    tags: [
                    ],
                    blog: {
                         blog_id: null,
                         title: null,
                         content: null,
                         create_time: null,
                         tag_id: null
                    }
               },
               methods: {
                    tag_name2tag_id(tag_name) {
                         for (var index in this.tags) {
                              if (this.tags[index].tag_name == tag_name) {
                                   return this.tags[index].tag_id;
                              }
                         }
                         return 6;
                    },
                    GetTags() {
                         // 1. 从服务器上获取 tag
                         $.ajax({
                              type: "get",
                              url: "/tag",
                              context: this,
                              success: function (data, status) {
                                   this.tags = data;
                              }
                         })
                    },
                   write_blog() {
                       // 从编辑器中获取到修改后的 markdown 数据
                         var content = testEditor.getMarkdown();
                         
                         // 获取当前时间
                         date = new Date();
                         year = date.getFullYear();
                         month = date.getMonth() + 1;
                         day = date.getDay() + 4;
                         create_time = year + '/' + month + '/' + day; 

                         // 拿到 tag_id
                         tag_id = this.tag_name2tag_id(tag_name.value);
                         // if (tag_id == 6)
                         // {
                         //     // 插入标签
                         //     var body = {
                         //         tag_name: tag_name.value
                         //     }
                         //     $.ajax({
                         //            type: "post",
                         //            url: "/tag",
                         //            data: JSON.stringify(body),
                         //            contentType: 'application/json; charset=utf-8',
                         //            context: this,
                         //            success: function(data, status)
                         //            {
                         //                console.log("Success to insert tag");
                         //            }
                         //     })

                         //     // 重新获取所有标签
                         //     // this.GetTags();
                         //     console.log(this.tags);
                         //     tag_id = this.tag_name2tag_id(tag_name.value);
                         //     console.log(tag_id);
                         // }
                         var body = {
                              title: blog_title.value,
                              content: content, // 此处需要得到修改后的内容
                              tag_id: tag_id,
                              create_time: create_time
                         }
                         $.ajax({
                              type: "post",
                              url: "/blog",
                              data: JSON.stringify(body),
                              contentType: 'application/json;charset=utf-8',
                              context: this,
                              success: function (data, status) {

                                   alert("提交成功");
                                   window.location.href="index.html";
                              }
                         })
                    },
               },
          })
               $(function () {
                    testEditor = editormd("blog_write", {
                         width: "100%",
                         height: "700px",
                         syncScrolling: "single",
                         path: "editor.md/lib/"
                    });

                    /*
                    // or
                    testEditor = editormd({
                        id      : "test-editormd",
                        width   : "90%",
                        height  : 640,
                        path    : "../lib/"
                    });
                    */
               });
               app.GetTags();
     </script>
</body>

</html>
